<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="4" :sm="24">
              <a-form-item>
                <a-input placeholder="请输入手机号" v-model="queryParam.mobile" />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="handleSearch(true)" icon="search">查询</a-button>
              </span>
            </a-col>
            <a-col :md="1" :sm="24" :offset="14">
              <a-button type="primary" icon="plus" @click="handleAdd()">新增</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <s-table
        ref="table"
        size="default"
        rowKey="id"
        :columns="columns"
        :data="loadData"
        showPagination="auto"
        :pagination="{ 'show-total': total => `共 ${total} 条` }"
      >
        <template slot="head_img" slot-scope="text">
          <a-avatar shape="square" :size="32" icon="user" :src="text" />
        </template>
        <a-tag :color="text === 1 ? 'blue' : 'red'" slot="sex" slot-scope="text">{{ text | sexFilter }}</a-tag>
        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />
            <a @click="handleDelete(record)">删除</a>
          </template>
        </span>
      </s-table>
    </a-card>
    <clerk-form ref="createModal" @ok="handleSearch" :type="$route.query.type"></clerk-form>
  </page-header-wrapper>
</template>

<script>
import { clerkList, clerkDel } from '@/api/store'
import formTableMixin from '@/mixins/formTableMixin'
import ClerkForm from './modules/ClerkForm'
const columns = [
  {
    title: '昵称',
    dataIndex: 'name'
  },
  {
    title: '头像',
    dataIndex: 'head_img',
    scopedSlots: { customRender: 'head_img' }
  },
  {
    title: '手机号',
    dataIndex: 'mobile'
  },
  {
    title: '省',
    dataIndex: 'province'
  },
  {
    title: '市',
    dataIndex: 'city'
  },
  {
    title: '区',
    dataIndex: 'area'
  },
  {
    title: '性别',
    dataIndex: 'sex',
    scopedSlots: { customRender: 'sex' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    scopedSlots: { customRender: 'action' }
  }
]

const SEX_MAP = {
  1: '男',
  2: '女'
}

export default {
  name: 'ClerkList',
  mixins: [formTableMixin],
  components: {
    ClerkForm
  },
  data () {
    this.columns = columns
    this.delAction = (parameter) => {
      const params = { ...this.$route.query, ...parameter }
      return clerkDel(params)
    }
    return {
      queryParam: {
        mobile: undefined
      },
      loadData: parameter => {
        const extraParams = this.$route.query
        console.log('extraParams', extraParams)
        const requestParameters = Object.assign(extraParams, parameter, this.queryParam)
        console.log('loadData request parameters:', requestParameters)
        return clerkList(requestParameters).then(res => {
          return res.data
        })
      }
    }
  },
  filters: {
    sexFilter (sex) {
      return SEX_MAP[sex]
    }
  }
}
</script>
